<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
                
	<xsl:template match="/"> 
		<div id="contenedor"> <p>Seleccione los componentes de la computadora que desea armar</p>
			<div id="tab_contenedor"> 
				<ul class="titulos"> 
					<xsl:for-each select="Componentes/*"> 
						<li> <!-- conteenido_1 debe ir cambiando-->
							<a class="tab" href="#"> 
								<xsl:attribute name="title">contenido_<xsl:value-of select="position()"/>
								</xsl:attribute> 
								<xsl:value-of select="@name"/> 
							</a> 
						</li> 
					</xsl:for-each> 
					<li>
						<a class="tab" href="#" title="resumen">Resumen</a>
					</li>
				</ul> 
				<div id="tab_contenido"> 
					<xsl:for-each select="Componentes/*"> 
					    <div class="acordeon">
					    	<span ><img src="img/flechas2.png"></img></span>
					        <a href="#"><xsl:value-of select="@name"/> </a>
					    </div>
						<div class="contenido"> 
							<xsl:attribute name="id">contenido_<xsl:value-of select="position()"/>
							</xsl:attribute> 
							<xsl:attribute name="style">background-image: url(<xsl:value-of select="@imagen"/>);
							</xsl:attribute>
							<div class="fondoTabla">
							<table >
							    <tr>
							        <th></th>
                                    <th>Descripcion</th>
                                    <th>Precio</th>
                                </tr>
								<xsl:for-each select="*">
    								<tr>
    			    					<td>
    			    						<input type="radio" class="radio">
    			    							<xsl:attribute name="name">grupo_<xsl:value-of select=".."><xsl:value-of select="position()"></xsl:value-of></xsl:value-of>
												</xsl:attribute> 
    			    							<xsl:attribute name="value">
    			    								<xsl:value-of select="Precio"/>
    			    							</xsl:attribute>
    			    						</input>
    			    					</td>
    			    					<td>
	    			    					<span><xsl:value-of select="Marca"></xsl:value-of> &#160;</span>
	    			    					<span><xsl:value-of select="Modelo"> </xsl:value-of> &#160;</span>
	    			    					<a class="info" href="#"  >info</a>
	    			    					<div class="descripcion">
	    			    						<span class="descrEtiqueta">MARCA: </span> <xsl:value-of select="Marca"></xsl:value-of> <br/>
	    			    						<span class="descrEtiqueta">MODELO: </span> <xsl:value-of select="Modelo"> </xsl:value-of> <br/>
	    			    						<span class="descrEtiqueta">DESCRIPCION: </span> <xsl:value-of select="Descripcion"> </xsl:value-of> <br/>
	    			    						<span class="descrEtiqueta">PRECIO: </span> <span>$<xsl:value-of select="Precio"/></span><br/>
	    			    						<xsl:if test="count(Imagen)>0">
		    			    						<img class="imgProducto">
		    			    						
		    			    							<xsl:attribute name="src"><xsl:value-of select="Imagen"></xsl:value-of>
														</xsl:attribute> 
														
		    			    						</img>
	    			    						</xsl:if>
	    			    					</div>
    			    					</td>
    			    					<td >
    			    						<xsl:text>$ </xsl:text> <span class="precio"><xsl:value-of select="Precio"/></span>
    			    					</td>
    		    					</tr>
    	    					</xsl:for-each>
    	    				</table>
    	    				</div>
						</div> 
					</xsl:for-each> 
					<div class="acordeon">
				    	<span ><img src="img/flechas2.png"></img></span>
				        <a href="#">Resumen </a>
				    </div>
				    <div class="contenido" id="resumen" style="background-image: url(img/computadora.jpg);"> 
				    	<div class="fondoTabla">
				    		<table id="tablaResumen">
							    <tr>
							        <th>Componente</th>
                                    <th>Descripcion</th>
                                    <th>Precio</th>
                                </tr>
                           </table>
				    	</div>
					</div>
				</div> 
			</div> 
		</div> 
	</xsl:template> 
</xsl:stylesheet>